<template>
  <div class="main">
  <div class="list">
    <div class="header" v-if="synthesisdata.length!==0">综合</div>
    <div class="block">
      <div v-for="synthesis in synthesisdata" :key="synthesis.id" class="item">
        <el-image class="img" :src="synthesis.imgurl" ></el-image>
        <a :href="synthesis.url" target="_blank" style="color:black;text-decoration-line: none">
          <div class="text" style=" width :200px; margin-left: 15px;">{{synthesis.webname}}</div>
        </a>
      </div>
    </div>
    <div class="header"  v-if="amusementdata.length!==0">娱乐</div>
    <div class="block">
      <div v-for="amusement in amusementdata" :key="amusement.id" class="item">
        <el-image class="img"  :src="amusement.imgurl" ></el-image>
        <a :href="amusement.url" target="_blank" style="color:black;text-decoration-line: none">
          <div  class="text" style=" width :200px; margin-left: 15px;">{{amusement.webname}}</div>
        </a>
      </div>
    </div>
    <div class="header"  v-if="readdata.length!==0">阅读</div>
    <div class="block">
      <div v-for="read in readdata" :key="read.id" class="item">
        <el-image class="img"  :src="read.imgurl" ></el-image>
        <a :href="read.url" target="_blank" style="color:black;text-decoration-line: none">
          <div class="text" style=" width :200px; margin-left: 15px;">{{read.webname}}</div>
        </a>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "MoreHotTable",
  data() {
    return {
      synthesisdata: [],
      amusementdata: [],
      readdata: [],
      readshow: true,
      amusementshow: true,
      synthesisshow: true,
    }
  },
  methods:{
    getMoreHotInfo(){
      const _this = this
      this.$axios.get(this.$base_url+'sys/hotsplatforminfo').then(res => {
        for (let item of res.data.data) {
          if (item.type==='综合'){
            _this.synthesisdata.push(item)
          }
          if (item.type==='娱乐'){
            _this.amusementdata.push(item)
          }
          if (item.type==='阅读'){
            _this.readdata.push(item)
          }
        }
      })
    },
    checkshow(){
      const _this = this
      if (_this.synthesisdata.length===0){
        _this.synthesisshow=false
      }
      if (_this.amusementdata.length===0){
        _this.amusementshow=false
      }
      if (_this.readdata.length===0){
        _this.readshow=false
      }
    }
  },
  created() {
    this.getMoreHotInfo()
  }
}
</script>

<style scoped>
.main{
  margin-top: 30px;
  margin-bottom: 40px;
  padding-top: 20px;
  --swiper-theme-color: #d8e8fa;
  color: #222;
  outline: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background-color: #fff;
  border-radius: 12px;
  overflow-x: hidden;
  transform: translate3d(0, 0px, 0);
}
.list{
  --swiper-theme-color: #d8e8fa;
  list-style: none;
  color: #333;
  margin: 0 0 20px 0;
  outline: 0;
  border: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display: flex;
  flex-direction: column;
}
.block{
  --swiper-theme-color: #d8e8fa;
  list-style: none;
  color: #333;
  margin-left: 10px;
  outline: 0;
  border: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display: flex;
  flex-wrap: wrap;
}
.item{
  --swiper-theme-color: #d8e8fa;
  list-style: none;
  color: #333;
  vertical-align: baseline;
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  flex: 45%;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 6px;
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid #ccc!important;
  padding: 14px;
  max-width: 455px;
}
.img{
  --swiper-theme-color: #d8e8fa;
  list-style: none;
  color: #333;
  line-height: 0;
  border: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  width: 36px;
  height: 36px;
  background: transparent;
  margin-left: 16px;
  margin-right: 12px;
  background-size: 100%;
  border-radius: 6px;
}
.text{
  --swiper-theme-color: #d8e8fa;
  list-style: none;

  outline: 0;
  border: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  margin-right: 4px;
}
.header{
  --swiper-theme-color: #d8e8fa;
  list-style: none;
  margin-top: 10px;
  outline: 0;
  border: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  color: #000;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 5px;
  margin-left: 15px;
}
</style>
